<template>
  <div class="box">
    <el-space alignment='center'>
      <el-card class="box-card" style="width: 550px">
        <template #header>
          <div class="card-header">
            <span>修改密码</span>
          </div>
        </template>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" status-icon label-width="120px" class="demo-ruleForm">
          <el-form-item label="旧密码" prop="oldPassword">
            <el-input v-model="ruleForm.oldPassword" type="password" autocomplete="off" />
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword">
            <el-input v-model="ruleForm.newPassword" type="password" autocomplete="off" />
          </el-form-item>
          <el-form-item label="新密码确认" prop="affirmPassword">
            <el-input v-model.number="ruleForm.affirmPassword" type="password" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="modifi('ruleFormRef')">修改</el-button>
            <el-button @click="resetForm('ruleFormRef')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-space>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import { post } from "@/utils/http";
export default {
  data() {
    //表单验证
    const checkName = (rule, value, callback) => {
      if (value === '') {
        return callback(new Error('请输入旧密码'))
      } else if (value != Cookies.get("pwd")) {
        callback(new Error('密码错误'))
      } else {
        callback()

      }
    }
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'))
      } else {
        callback()
      }
    }
    const validates = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入确认密码'))
      } else if (value != this.ruleForm.newPassword) {
        callback(new Error('密码不一致'))
      }
      else {
        callback()
      }
    }
    return {
      ruleForm: {
        oldPassword: '',
        newPassword: '',
        affirmPassword: ''
      },
      rules: {
        oldPassword: [
          {
            validator: checkName,
            trigger: 'blur'
          }
        ],
        newPassword: [
          {
            validator: validatePass,
            trigger: 'blur'
          }
        ],
        affirmPassword: [
          {
            validator: validates,
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    // 修改
    modifi(ruleFormRef) {
      this.$refs[ruleFormRef].validate(valid => {
        if (valid) {
          post({
            _gp: 'admin',
            _mt: 'newPassword',
            oldPassword: this.ruleForm.oldPassword,
            newPassword: this.ruleForm.newPassword
          }).then(res => {
            if (200 == res.errno) {
              ElMessage.success('修改成功')
              Cookies.remove('token')
              this.$router.replace('/login')
            }
          })
        }
      })
    },
    // 重置
    resetForm(ruleFormRef) {
      this.$refs[ruleFormRef].resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  width: 550px;
  margin: 10px auto;
}
</style>